<!-- 图片上传 -->
<template>
  <div style="line-height: initial;" :id="dynamicID">
    <div class="disFlxAC">
      <a-upload
        :accept="fileType.join(',')"
        list-type="picture-card"
        class="noPadding"
        :multiple="limit !== 1"
        :disabled="disabled"
        :headers="headers"
        :action="uploadApi.apk"
        :file-list="fileList"
        :show-upload-list="true"
        :before-upload="beforeUpload"
        @preview="handlePreview"
        @change="handleChange"
      >
        <div
          v-if="(limit === 0 || fileList.length < limit) && !disabled"
          style="height: 100%;"
          class="disFlxCC upLoadBtn"
        >
          <a-icon type="plus" :class="width <= 50 || height <= 50 ? 'fz-14' : 'fz-28'" style="color:#999;" />
          <div v-if="width > 50 && height > 50" class="fz-12 _pt-5" style="color:#999;"><slot name="tips" /></div>
          <div v-if="warehouse" v-has="'content:warehouse:list'" class="warehouseBtn" @click.stop="openWarehouse">
            从素材库选择
          </div>
        </div>
      </a-upload>
      <div
        v-if="disabled && !fileList.length"
        style="border: 1px solid #e8e8e8;padding: 50px;background-color: #f5f5f5;font-size: 28px;cursor: no-drop;border-radius: 5px;color: rgba(0, 0, 0, 0.25);"
      >
        +
      </div>
      <a-button
        v-if="fileList.length && cropper && openEditCropper && !disabled"
        @click="editImg(fileList)"
        type="dashed"
        icon="scissor"
      >
        裁剪
      </a-button>
    </div>

    <!-- 上传提示 -->
    <div v-if="!disabled" v-html="tipText"></div>

    <!-- 裁剪组件 -->
    <ImgCropper
      v-if="cropper"
      ref="ImgCropper"
      :fileType="fileType"
      :fileSize="fileSize"
      :width="width"
      :height="height"
      :borderRadius="borderRadius"
      :enlarge="cropperEnlarge"
      @success="cropperSuccess"
    />
    <!-- 素材库 -->
    <WarehouseModal
      v-if="warehouse"
      ref="WarehouseModal"
      :limit="limit"
      :fileSource="fileSource"
      @select="handSelectImgs"
    />
  </div>
</template>
<script>
import ImgCropper from '@/components/UpFile/imgCropper'
import WarehouseModal from '@/components/UpFile/warehouseModal'
import { props, watch, computed, data, methods, getBase64 } from './mixin'

export default {
  components: {
    ImgCropper,
    WarehouseModal
  },
  props: {
    ...props,
    openEditCropper: {
      type: Boolean,
      default: false
    },

    // image
    fileSource: {
      type: String,
      default: 'image'
    },
    // 上传类型范围 例如['.png', '.jpg', '.jpeg']
    fileType: {
      type: Array,
      default: () => ['.png', '.jpg', '.jpeg']
    },
    // 是否需要裁剪
    cropper: {
      type: Boolean,
      default: false
    },
    // 裁剪图片输出比例倍数
    cropperEnlarge: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    this.upDom()
  },
  computed: {
    ...computed
  },
  watch: {
    ...watch
  },
  data() {
    return {
      ...data
    }
  },
  methods: {
    ...methods,
    // 预览
    async handlePreview(file) {
      if (!file.thumbUrl && !file.url) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.$viewerApi({ images: [file.thumbUrl || file.url] })
    },
    // 素材库选择
    openWarehouse() {
      this.$refs.WarehouseModal.show()
    },
    editImg(imgs) {
      console.log(imgs[0].thumbUrl)
      this.$refs.ImgCropper.show(imgs[0].thumbUrl)
    },
    // 素材库选择图片后
    handSelectImgs(imgs) {
      console.log(imgs)

      // 需要裁剪并且只选择了一张图片,进入裁剪
      if (this.cropper && imgs && imgs.length === 1) {
        this.$refs.ImgCropper.show(imgs[0])
      } else {
        this.urlPushFileList(imgs)
        this.upVmodel() // 更新v-model
      }
    },
    // 裁剪并上传完成
    cropperSuccess(url) {
      this.urlPushFileList([url])
      this.upVmodel() // 更新v-model
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep.ant-upload-picture-card-wrapper {
  width: fit-content;
}
</style>
